import { Component } from "react";
// import connect from './../redux/connect';
import './../css/movieDetail.scss';
import indexAction from '../redux-demo/actions/actions';


import Store from "./../redux-demo/index";

import { connect } from "react-redux";

import Header from "./../component/hearder.Component";

import CacheComponent from "./../component/cacheComponent";


 class MovieDetail extends Component{
    constructor(){
        super()
        this.needCache = true ; //是否开启缓存
        this.freshData = this.freshData.bind(this) ;
        this.state = {
            PaginationParams : {
                PaginationElement:''
            },
        }
    }
    componentDidMount(){
        console.log(this.props , 'movie')
        this.setState({
            PaginationParams :{
                PaginationElement :this.refs.PaginationElement
            } 
        })
        this.getData(this.props.match.params.id) ;
    }
    getData(id){
        // this.props.indexAction.resourceDetail(id,() => {
        // })
        Store.dispatch(indexAction.resourceDetail({
            type:'GET_DATA' ,
            id:id
        }))
    }
    scrollFn(){
        console.log('11')
        console.log()
    }
    activateLasers(){
        history.go(-1)
    }
    freshData(){
        if(this.props.history.action == "POP"){
            let Data = JSON.parse(window.sessionStorage.getItem(this.props.location.pathname)) || {} ;
            document.documentElement.scrollTop = Data.scroll || '0'
        }
    }
    render(){
        let { resourceData } = this.props.homeChild ;
        let { genres =[] , images ={} , directors =[] , casts=[]} = resourceData ;
        let { PaginationParams } = this.state ;
        return resourceData == undefined ? <div>ss</div> : <div className="page">
            <CacheComponent freshData={this.freshData} needCache={this.needCache}>
                <Header/>
                <div onClick={ this.activateLasers }>返回</div>
                <div className="movie-header blur" ref='PaginationElement' style={{backgroundImage:'url(' + images.small +')'}}>
                    <div className="base-source">
                        <img src={images.small} className="banner"/>
                        <div>
                            <h2 className="name">{resourceData.title}</h2>
                            <span className="old-name" >{resourceData.original_title}</span>
                            <ul className="genres clearfix">
                                {genres.map( (item,index) => {
                                    return <li key={index}>{item + (index < genres.length-1 ? ',' : '')}</li>
                                })}
                            </ul>
                            <div className="ratings_count">（{resourceData.ratings_count}人评分）</div>
                            
                            <div className="countries">{resourceData.countries} | {resourceData.durations}</div>
                        </div>
                    </div>
                </div>
                <div className="summary">
                    <div className="movie-summary">电影简介</div>
                    <p>{resourceData.summary}</p>
                </div>
                <div className="avatars-content">
                    <h2>影人</h2>
                    <div className="avatars">
                        <ul className="avatars-list clearfix" style={{width: 5.8 * (casts.length +1) + 'rem'}}>
                            {directors.map((item,index) => {
                                return <li data-id={item.id} key={index}>
                                    <img src={item.avatars.small}/>
                                    <p>{item.name}</p>
                                </li>
                            })}
                            {
                                casts.map((item,index) => {
                                    return <li data-id={item.id} key={index}>
                                        <img src={item.avatars.small}/>
                                        <p>{item.name}</p>
                                    </li>
                                })
                            }
                        </ul>
                    </div>
                </div>
            </CacheComponent>
        </div>
    }
}


export default connect((state) => {
    return {
        homeChild:state
    }
})( MovieDetail );


